<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <div onclick="Change(this);">菜单一</div>
            <div class="content">
                <div>1.1</div>
                <div>1.2</div>
                <div>1.3</div>
            </div>
        </div>
        <div>
            <div onclick="Change(this);">菜单二</div>
            <div class="content hide">
                <div>2.1</div>
                <div>2.2</div>
                <div>2.3</div>
            </div>
        </div>
        <div>
            <div onclick="Change(this);">菜单三</div>
            <div class="content hide">
                <div>3.1</div>
                <div>3.2</div>
                <div>3.3</div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
        function Change(arg){
            //找到，点击的哪一个？
            //var t= $(arg).text();
//            console.log(t);
            //$(arg)表示当前点击的标签
            //一、找到下一个标签，移除hide
                //$(arg).next()下一个标签
                //removeClaass('')
            $(arg).next().removeClass('hide');
            //二、找到其他菜单，内容隐藏，添加hide
                //当前标签的父标签 $(arg).parent()
                //所有父标签的兄弟标签 $(arg).parent().siblings()
                //所有兄弟标签下的content样式的标签，添加hide样式
            $(arg).parent().siblings().find('.content').addClass('hide');
        }
    </script>
</body>
</html>